<!-- 投票信息 -->

<template>
	<uni-popup ref="popup" background-color="#fff" @change="onPopup">
		<view class="wrapper u-padding-left-30 u-padding-right-30">

			<view class="u-flex u-row-between u-margin-top-30">

				<view class="popup-title">
					历史投票
				</view>
				<view class="">
					<u-icon @click="onClose" name="close"></u-icon>
				</view>
			</view>

			<view class="wrapper-item u-margin-top-40  u-border u-padding-20" v-for="item,index in  VoteData">
				<view class="u-abso end-wrapper">
					<img class="end-icon" src="../../../static/images/end.png" alt="">
				</view>
				<view class="vote-title u-margin-top-30">
					{{item.title}}
				</view>
				<view class="vote-date u-margin-top-10">
					<text>{{item.startTime}}</text>
					<text class="u-margin-left-20 u-margin-right-20">-</text>
					<text>{{item.endTime || '无限制'}}</text>
				</view>






				<view class=" vote-item u-padding-top-20 u-padding-bottom-20 u-border-bottom">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 agree">
							同意:{{item.affirmativeNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-10">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#07c160" :percent="computedPer(item.affirmativeNum,item)"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{computedPer(item.affirmativeNum,item)}}%
							</text>
						</view>

					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{handlerPerson(item.affirmative)}}</text>
					</view>
				</view>
				<view class=" vote-item u-padding-top-20 u-padding-bottom-20 u-border-bottom">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 noagree">
							不同意:{{item.dissentingNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-10">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#F56C6C" :percent="computedPer(item.dissentingNum,item)"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{computedPer(item.dissentingNum,item)}}%
							</text>
						</view>

					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{handlerPerson(item.dissenting)}}</text>
					</view>
				</view>
				<view class=" vote-item u-padding-top-20 u-padding-bottom-20  ">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 waiver">
							弃权:{{item.affirmativeNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-5">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#666666" :percent="computedPer(item.affirmativeNum,item)"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{computedPer(item.affirmativeNum,item)}}%
							</text>
						</view>

					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{handlerPerson(item.abstention)}}</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import Card from '@/components/card/components/cardDetail.vue'
	import HButton from '@/components/button/index.vue'
	import ProjectApi from '@/apis/project.js'
	import { Storage_UserInfo } from '@/common/index.js'

	export default {

		components: {
			Card,
			HButton
		},
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},

		},
		computed: {

			VoteData() {

				return this.data.length ? this.data : []
			},



		},

		data() {
			return {
				voteResult: '',
				voteData: [],
			}
		},
		methods: {
			onClose() {
				this.$refs.popup.close()
			},
			onPopup(ev) {
				if (ev.show) {} else {}
			},
			openPopUp() {
				console.log('bottom');
				this.$refs.popup.open('bottom')
			},
			onTimeEnd() {

			},

			computedPer(num, item) {
				let { abstentionNum, dissentingNum, affirmativeNum } = item
				var total = abstentionNum + dissentingNum + affirmativeNum
				if (total == 0) {
					return 0
				} else {
					var per = (num / total) * 100
					return per.toFixed(0)
				}

			},
			handlerPerson(value) {
				if (value.length) {
					let users = value.map((item) => item.name)
					return users.join('、')
				}
				return ''
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 70vh;
		overflow: auto;
		margin-bottom: 200rpx;
		border-radius: 8rpx;

		&-item {
			border-radius: 10rpx;
		}
	}

	.end {
		&-wrapper {
			top: -12rpx;
			right: -12rpx;
		}

		&-icon {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.popup-title {
		font-weight: 600;
		font-size: 32rpx;
		color: #0F2E4D;
	}

	.agree {
		color: #07C160;
	}

	.noagree {
		color: #F56C6C;
	}

	.waiver {
		color: #666666;
	}

	.vote {
		&-title {
			font-weight: 600;
			font-size: 34rpx;
			color: #0F2E4D;
		}

		&-date {
			font-weight: 400;
			font-size: 24rpx;
			color: #98A5B3;
		}

		&-interval {
			&-label {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
			}

			&-value {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}
		}

		&-label {

			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;

		}

		&-item {
			// flex-direction: column;
		}

		&-result {
			&-label {
				font-weight: 400;
				font-size: 32rpx;
			}

			&-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
				white-space: nowrap
			}

			&-per {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}

			&-name {
				font-weight: 400;
				font-size: 24rpx;
				color: #98A5B3;
			}
		}

	}
</style>
